<template>
	<view class="min-h-[100vh] bg-background">
		<view class="p-[30rpx]">
			<view class="p-[30rpx] bg-second rounded-[8rpx]">
				<view class="flex justify-between items-center text-white font-bold leading-none text-[26rpx]">
					<view class="">返利金额</view>
					<view class="flex items-center" @click="toInvite">
						<up-icon name="share-square" size="36rpx" color="#fff" :bold="true"></up-icon>
						<view class="">分享</view>
					</view>
				</view>
				<view class="py-[24rpx] border-b border-white">
					<up-text mode="price" :text="banlance" :bold="true" color="#fff" size="48rpx"></up-text>
				</view>
			</view>
			<view class="bg-white rounded-[8rpx] mt-[28rpx]">
				<view class="flex items-center justify-between px-[24rpx] py-[28rpx] border-b border-[#E2E2E2]">
					<view class="text-[36rpx]">邀请列表</view>
					<view class="flex items-center leading-none text-[#666] rounded-[8rpx] overflow-hidden">
						<view
							class="text-[24rpx] bg-[#F7F8FA] px-[16rpx] py-[8rpx]"
							:class="{
								'!bg-second': item.value == params.isRef,
								'!text-white': item.value == params.isRef
							}"
							v-for="item in tabs"
							:key="item.value"
							@click="changeTabs(item)"
						>
							{{ item.title }}
						</view>
					</view>
				</view>
				<view class="px-[24rpx]">
					<template v-if="list.length">
						<view class="py-[24rpx] flex items-center justify-between text-[24rpx] border-b border-[#e2e2e2] last:border-none" v-for="item in list" :key="item.id">
							<view class="">
								<view class="flex items-center">
									<view class="text-[28rpx] mr-[8rpx]">下单返利({{ item.userName }})</view>
									<view class="text-second px-[16rpx] py-[2rpx] rounded-full bg-third">{{ item.isRef ? '直推' : '间推' }}</view>
								</view>
								<view class="mt-[16rpx] text-[#999]">{{ item.addTime }}</view>
							</view>
							<view class="">
								<text class="text-[#999]">返利金额：</text>
								<text class="text-second">+{{ item.amount.toFixed(2) }}</text>
							</view>
						</view>
					</template>
					<view class="min-h-[40vh]" v-else>
						<up-empty mode="list" marginTop="200rpx" text="暂无邀请成员"></up-empty>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { getDistributionDetail } from '@/config/api/distribution';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
const banlance = ref(0);
onLoad(() => {
	banlance.value = uni.getStorageSync('userInfo').balance || 0;
	getList();
});
onReachBottom(() => {
	if (list.value.length < params.total) {
		params.page++;
		getList();
	}
});
const tabs = reactive([
	{
		title: '全部成员',
		value: 0
	},
	{
		title: '只看直推',
		value: 1
	},
	{
		title: '只看间推',
		value: 2
	}
]);
const params = reactive({
	bindId: uni.getStorageSync('userInfo').id || 0,
	page: 1,
	limit: 10,
	total: 0,
	type: 1,
	isRef: 0
});
const list = ref([]);
const changeTabs = (item) => {
	if (item.value == params.isRef) return;
	params.isRef = item.value;
	params.page = 1;
	list.value = [];
	getList();
};
const getList = async () => {
	try {
		const res = await getDistributionDetail(params);
		if (res.code == 200) {
			list.value = list.value.concat(res.rows);
			params.total = res.total;
		}
	} catch (error) {}
};
const toInvite = () => {
	uni.navigateTo({
		url: '/pages/invite/invite'
	});
};
</script>

<style lang="scss" scoped></style>
